<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="initial-
	scale=1.0, user-scalable=no, width=device-width">
	<title>默认样式信息窗体</title>
	<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
	<style>
		html, body, #container {
			height: 100%;
			width: 100%;
		}

		.content-window-card {
			position: relative;
			box-shadow: none;
			bottom: 0;
			left: 0;
			width: auto;
			padding: 0;
		}

		.content-window-card p {
			height: 2rem;
		}

		.custom-info {
			border: solid 1px silver;
		}

		div.info-top {
			position: relative;
			background: none repeat scroll 0 0 #F9F9F9;
			border-bottom: 1px solid #CCC;
			border-radius: 5px 5px 0 0;
		}

		div.info-top div {
			display: inline-block;
			color: #333333;
			font-size: 14px;
			font-weight: bold;
			line-height: 31px;
			padding: 0 10px;
		}

		div.info-top img {
			position: absolute;
			top: 10px;
			right: 10px;
			transition-duration: 0.25s;
		}

		div.info-top img:hover {
			box-shadow: 0px 0px 5px #000;
		}

		div.info-middle {
			font-size: 12px;
			padding: 10px 6px;
			line-height: 20px;
		}

		div.info-bottom {
			height: 0px;
			width: 100%;
			clear: both;
			text-align: center;
		}

		div.info-bottom img {
			position: relative;
			z-index: 104;
		}

		span {
			margin-left: 5px;
			font-size: 11px;
		}

		.info-middle img {
			float: left;
			margin-right: 6px;
		}
	</style>

</head>
<body>
<div id="container"></div>
<div class="info">
	点击地图上的点标记，打开所添加的自定义信息窗体
</div>
<script type="text/javascript"
		src="https://webapi.amap.com/maps?v=1.4.15&key=ec50b8bbb80620ff7561b8610495d647"></script>

<script type="text/javascript">    //地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体
var map = new AMap.Map("container", {
	resizeEnable: true,
	center: [118.175666,24.488707],
	zoom: 18
});
addMarker();
var circle = new AMap.Circle({
	center: new AMap.LngLat(118.175666,24.488707),  // 圆心位置
	radius: 80, // 圆半径
	fillColor: ' LightSteelBlue',   // 圆形填充颜色
	fillOpacity:'0.5',
	strokeColor: '#4169E1', // 描边颜色
	strokeWeight: 2, // 描边宽度
});

map.add(circle);

//添加marker标记
function addMarker() {
	map.clearMap();
	var marker = new AMap.Marker({
		map: map,
		position: [118.175666,24.488707]
	});
	//鼠标点击marker弹出自定义的信息窗体
	AMap.event.addListener(marker, 'click', function () {
		infoWindow.open(map, marker.getPosition());
	});
}

//实例化信息窗体
var title = '厦门海晟融创信息技术有限公司',
		content = [];
content.push("<img src='https://zhengxin-pub.cdn.bcebos.com/logopic/6f1bb48e30f62cf9701f0a767b47cf78_fullsize.jpg?x-bce-process=image/resize,m_lfit,w_112'>地址：厦门市软件园二期观日路2号401-404室、501、503、504室");
content.push("电话：5928060218");

var infoWindow = new AMap.InfoWindow({
	isCustom: true,  //使用自定义窗体
	content: createInfoWindow(title, content.join("<br/>")),
	offset: new AMap.Pixel(16, -45)
});

//构建自定义信息窗体
function createInfoWindow(title, content) {
	var info = document.createElement("div");
	info.className = "custom-info input-card content-window-card";

	//可以通过下面的方式修改自定义窗体的宽高
	//info.style.width = "400px";
	// 定义顶部标题
	var top = document.createElement("div");
	var titleD = document.createElement("div");
	var closeX = document.createElement("img");
	top.className = "info-top";
	titleD.innerHTML = title;
	closeX.src = "https://webapi.amap.com/images/close2.gif";
	closeX.onclick = closeInfoWindow;

	top.appendChild(titleD);
	top.appendChild(closeX);
	info.appendChild(top);

	// 定义中部内容
	var middle = document.createElement("div");
	middle.className = "info-middle";
	middle.style.backgroundColor = 'white';
	middle.innerHTML = content;
	info.appendChild(middle);

	// 定义底部内容
	var bottom = document.createElement("div");
	bottom.className = "info-bottom";
	bottom.style.position = 'relative';
	bottom.style.top = '0px';
	bottom.style.margin = '0 auto';
	var sharp = document.createElement("img");
	sharp.src = "https://webapi.amap.com/images/sharp.png";
	bottom.appendChild(sharp);
	info.appendChild(bottom);
	return info;
}

//关闭信息窗体
function closeInfoWindow() {
	map.clearInfoWindow();
}
</script>
</body>

</html>